Skip to main content

📽️ Multimedia

The Multimedia category encompasses components that handle various media types, enabling you to enrich your application with images, videos, animations, and 3D models.

Available Components:

  • Image
  • Video
  • Lottie Animation
  • 3D Model
tip

Each component is fully customizable, allowing you to drag and drop, resize, and tailor them to fit your app's specific needs. Additionally, every component supports adding actions, setting styles for specific screen sizes, and extensive customization to enhance functionality and design.

info

The settings available in the left and right toolbar may vary depending on the selected component.

1. Image​

  1. Add the Image:
    • Drag and drop the Image component onto the Canvas.
  2. Position and Resize:
    • Place the image where desired and adjust its size using percentage values or by dragging its edges.
  3. Customize the Image:
    • Left Toolbar:
      • Add Image Link: Paste the URL of the image you want to display.
      • Upload Image:
        • Click on "Choose Image" and select an image file from your device.
        • Alternatively, drag and drop an image from your desktop.
        • Click "Upload Image" to add it to AppStruct.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the image's appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, such as border style, shadow, and more.

2. Video​

  1. Add the Video:
    • Drag and drop the Video component onto the Canvas.
  2. Position and Resize:
    • Place the video where desired and adjust its size accordingly.
  3. Customize the Video:
    • Left Toolbar:
      • Add Video Link: Paste the URL of the video you want to embed.
      • Upload Video:
        • Click on "Choose Video" and select a video file from your device.
        • Alternatively, drag and drop a video from your desktop.
        • Click "Upload Video" to add it to AppStruct.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the video’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, such as border style, shadow, and more.

3. Lottie Animation​

  1. Add the Lottie Animation:
    • Drag and drop the Lottie Animation component onto the Canvas.
  2. Position and Resize:
    • Place the animation where desired and adjust its size accordingly.
  3. Customize the Lottie Animation:
    • Left Toolbar:
      • Add Lottie Animation Link: Paste the URL of the Lottie animation file.
      • Upload Lottie Animation File:
        • Click on "Choose a Lottie Animation File" and select a .json file from your device.
        • Alternatively, drag and drop a Lottie animation file from your desktop.
        • Click "Upload Lottie Animation File" to add it to AppStruct.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the animation’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, such as border style, shadow, and more.

4. 3D Model​

  1. Add the 3D Model:
    • Drag and drop the 3D Model component onto the Canvas.
  2. Position and Resize:
    • Place the 3D model where desired and adjust its size accordingly.
  3. Customize the 3D Model:
  • Left Toolbar:
    • Add 3D Model Link: Paste the URL of the 3D model file.
    • Upload 3D Model File:
      • Click on "Add 3D Model File" and select a .glb or .gltf file from your device.
      • Alternatively, drag and drop a 3D model file from your desktop.
      • Click "Upload 3D Model File" to add it to AppStruct.
    • Rotation and Scaling Options:
      • Autorotate: Enable or disable automatic rotation of the model.
      • Rotate by Mouse or Touch: Allow users to rotate the model using mouse or touch gestures.
      • Scale by Mouse Wheel or Touch Events: Enable scaling of the model through mouse wheel or touch interactions.
    • Set Camera Position: Enter numerical values to define the camera's position relative to the model.
    • Add Action: Click on "Add Action" to define interactions.
    • Set Styles for Specific Screen Sizes: Customize the 3D model’s appearance for different devices.
  • Right Toolbar:
    • Utilize comprehensive customization options, such as border style, shadow, and more.

Spline Integration:​

Spline integration allows you to add animated 3D models to AppStruct and interact with them directly in your Canvas and Preview Mode. Follow these steps to take advantage of the Spline integration:

  1. Create or Open a Scene in Spline.
  2. Export Your 3D Model:
    • Click on the "Export" button.
    • Select "Code Export (Beta)" in the popup window.
    • Copy the scene link provided in the first bar.
  3. Add to AppStruct:
    • Use this link in the 3D Model Link section to add the Spline model directly to your project.

Best Practices:​

  • Test Responsiveness: Always test the 3D model on different devices to ensure it looks good and functions well.
  • Interaction Design: Use actions and gestures for a more interactive and engaging user experience.
info

To make the best use of the 3D Model feature, ensure that your models are optimized for performance to provide a seamless user experience across all devices.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!